<template>
	<view class="box">

		<view class="top">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
<!-- 			<view class="nav-title" @click="shopShow=!shopShow">
				<view class="enterprise-box">
					<uni-icons type="location-filled" size="25"></uni-icons>
					<text>{{ylEnterprise.enterpriseName}}</text>
				</view>
				<view class="capsule" :style="{'width': capsule.width + 'px',height:capsule.height + 'px'}">
				</view>
			</view> -->

			<!-- 门店 -->
			<view class="mask" v-show="shopShow">
				<view class="maskItem" v-for="(item,index) in ShopList" :key="item.enterpriseCode"
					@click="handleShop(item)">
					<text>{{item.enterpriseName}}</text>
					<view class="" @click.stop="handleAttention(item,index)">
						<uni-icons type="star" size="25" v-if="!item.isWatch"></uni-icons>
						<uni-icons type="star-filled" color="yellow" size="25" v-else>
						</uni-icons>
					</view>
				</view>
			</view>
			<!-- 门店 -->

			<view class="logo" v-show="!shopShow">
				<image src="../../static/logo@3x.png" mode="aspectFit"></image>
			</view>
			<view class="search">
				<u-search shape="square" placeholder="点击购买商品" animation="false" disabled @click="gotoSearch" height="80"
				bg-color="#F8F8F8" color="#ccc"></u-search>
			</view>
			<view class="content" v-show="!shopShow">
				<!-- 轮播图开始 -->
				<u-swiper class="swiper" :list="bannerList" name="url" border-radius="16" height="254" width="686"
					img-mode="widthFix"></u-swiper>
				<!-- 轮播图结束 -->
				<!-- 首页模块开始 -->
				<view class="shouye-box">
					<view class="shouye-item" v-for="item in GoodsClass" :key="item.id" @click="handleClick(item)">
						<view class="" style="">
							<image style="width: 112rpx;height: 112rpx;border-radius: 100rpx;" :src="item.icon[0].url"
								mode=""></image>
						</view>
						<text>{{item.title}}</text>
					</view>
				</view>
				<!-- 首页模块结束 -->
				<view class="login-tip" v-show="isLogin" @click="toPage('/subPackages/login/login')">
					<view>
						<u-icon name="volume-up" style="margin-right: 6rpx;"></u-icon>
						<text>登录后，享受更多服务</text>
					</view>
					<view>
						<text style="margin-right: 6rpx;">去登录</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="nav-bar">
					<!-- <text :class="{'active':active==0}" @click="changeNav(0)">所有商品</text>丨
					<text :class="{'active':active==1}" @click="changeNav(1)">今日新品</text> -->
					<view style="margin-right: 24rpx;">
						<text :class="{'active':active==0}" @click="changeNav(0)">热门服务</text>
						<view :class="{'title_bg':active == 0}">
						</view>
					</view>

					<view style="margin-left: 36rpx;">
						<text :class="{'active':active==1}" @click="changeNav(1)">近期活动</text>
						<view :class="{'title_bg':active == 1}">
						</view>
					</view>
				</view>

				<!-- <view class="goods-box">
					<view class="" v-if="GoodsList.length">
						<goodItem v-for="item in GoodsList" :key="item.id" :item="item">
						</goodItem>
					</view>
					<view class="empty_box" v-else>
						<image src="../../static/empty_box.png" mode=""></image>
						<text>暂无商品</text>
					</view>
				</view> -->

				<view class="list-box" v-if="active==0" style="margin: 0;">
					<view v-if="list.length" v-for="(item, index) in list" :key="index" class="card-item">
						<view class="card-item" @click="toProductDetail(item)">
							<image :src="item.images[0].url" mode="" class="img"></image>
							<view class="card-right">
								<view class="card-title">
									{{ item.name }}
								</view>
								<view class="card-desc line1">
									<text class="card-desc-hour">{{ item.productServiceInfo.serviceHours }}</text>  
									{{ item.description }}
								</view>
								<view class="card-bot flex fjb">	
									<view class="card-bot-left">
										<text class="icon">￥</text>
										<text class="num">{{ item.unitPrice }}</text>
									</view>
									<view class="card-bot-right commonbtn" @click.stop="toOrder(item)">
										预约
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="empty_box" v-else>
						<image src="../../static/empty_box.png" mode=""></image>
						<text>暂无服务</text>
					</view>
				</view>
				<view class="list-box" v-if="active==1" style="margin: 0;">
					<view v-if="list.length" v-for="(item, index) in list" :key="index" class="card-item">
						<view class="card-item" @click="toProductDetail(item)">
							<image :src="item.images[0].url" mode="" class="img"></image>
							<view class="card-right">
								<view class="card-title">
									{{ item.name }}
								</view>
								<view class="card-desc line1">
									<text class="card-desc-hour">已售{{ item.sales }}</text>  
									{{ item.description }}
								</view>
								<view class="card-desc line1">
									<!-- <u-parse :html="item.intro"></u-parse> -->
								</view>
								<view class="card-bot flex fjb">	
									<view class="card-bot-left">
										<text class="icon">￥</text>
										<text class="num">{{ item.unitPrice }}</text>
									</view>
									<view class="card-bot-right commonbtn" @click.stop="toOrder(item)">
										预约
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="empty_box" v-else>
						<image src="../../static/empty_box.png" mode=""></image>
						<text>暂无服务</text>
					</view>
				</view>
			

			</view>
		</view>
<!-- 		<view class="login-tip" v-show="isLogin" @click="toPage('/subPackages/login/login')">
			<text>登录后，享受更多服务</text>
			<text>去登录>></text>
		</view> -->
	</view>
</template>
<script>
	import {
		recordHomePageApi,
		recordClickHomePageModuleApi
	} from '../../common/API/screenApi.js'
	import {
		getClassApi,
		getGoodsListApi,
		addAttentionApi,
		delAttentionApi,
		getGroupGoodsListApi
	} from '../../common/API/goodsApi.js'
	import {
		getBannerApi,
		getProjectCodeApi
	} from '../../common/API/userInfoApi.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		goodItem
	} from '../../components/goodItem.vue'
	import {
		getShopListApi
	} from '../../common/API/Salesman.js'
	import {
		getYMD,
		handleDate,
		mapSalesmanList
	} from '../../utils/filter.js'
	const app = getApp()
	export default {
		components: {
			goodItem
		},
		data() {
			return {
				wh: 0,
				capsule: {},
				GoodsClass: [],
				bannerList: [],
				active: 0,
				navList: [{
					name: '团购商品'
				}, {
					name: ''
				}, {
					name: '长挂商品'
				}],
				list: [],
				GoodsList: [],
				total: 0,
				pageNum: 1,
				throttle: false,
				ShopList: [],
				shopTotal: 0,
				ShopPageNum: 1,
				shopShow: false,
				DateObj: {},
				isShow: true,
				categoryIds: [-1,-2],
				isLogin: false
			};
		},
		computed: {
			...mapState('user', ['ylProjectCode', 'ylToken', 'ylUserInfo', 'ylEnterprise']),
			showList() {
				return this.GoodsList.length ? true : false
			},
			ylProject() {
				return uni.getStorageSync('ylProject')
			}
		},
		methods: {
			...mapMutations('user', ['MusetProjectCode', 'MusetEnterprise']),
			gotoSearch() {
				// 跳转到分包中的搜索页面
				uni.navigateTo({
					url: '/subPackages/search/search'
				})
			},
			async getGoodsClass() {
				const res = await getClassApi(this.ylEnterprise.enterpriseCode, 1)
				if (res.status === 200) {
					this.GoodsClass = res.data.filter(item => !item.isShow)
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getCommonGoodsList() {
				const res = await getGoodsListApi({
					// salesType: '1',
					// createEnd: this.DateObj.createEnd,
					// createStart: this.DateObj.createStart,
					// appRecommend: 0,
					pageNum: this.pageNum,
					pageSize: 10,
					enterpriseCode: this.ylEnterprise.enterpriseCode,
					type: "1",
					categoryIds: this.categoryIds
				})
				if (res.status === 200) {
					this.list.push(...res.data.records)
					this.total = res.data.total
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getBanner(callback) {
				const res = await getBannerApi(this.ylEnterprise.enterpriseCode)
				if (res.status === 200) {
					this.bannerList = res.data
				}
				callback && callback()
			},
			async getProjectCode() {
				const res = await getProjectCodeApi()
				this.MusetProjectCode(res)
			},
			async changeNav(index) {
				if (this.active === index) return
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.active = index
				if (this.active === 0) {
					this.categoryIds = [-1,-2]
					this.DateObj = {}
				} else if (this.active === 1) {
					this.categoryIds = [-3,-4,-5]
					this.DateObj = handleDate()
				}
				await this.getCommonGoodsList()
			},
			async getShopList() {
				const res = await getShopListApi()
				this.ShopList.push(...res.data)
				this.shopTotal = res.data.total
				if (!this.ylEnterprise.enterpriseCode) {
					this.MusetEnterprise(this.ShopList[0])
				}
			},
			handleShop(item) {
				this.MusetEnterprise(item)
				this.refresh()
			},
			async refresh() {
				Object.assign(this.$data, this.$options.data())
				//右上角胶囊高度
				this.capsule = wx.getMenuButtonBoundingClientRect()
				await this.getShopList()
				await this.getGoodsClass()
				await this.getCommonGoodsList()
				await this.getBanner(uni.stopPullDownRefresh)
			},
			async handleAttention(item, index) {
				if (item.isWatch) {
					//点击取消
					this.ShopList[index].isWatch = 0
					const res = await delAttentionApi(item.enterpriseCode)
					if (res.status === 200) {
						uni.$showMsg('已取消关注')
					} else {
						uni.$showMsg(res.message)
					}
				} else {
					//点击新增关注门店
					this.ShopList[index].isWatch = 1
					const res = await addAttentionApi(item.enterpriseCode)
					if (res.status === 200) {
						uni.$showMsg('关注店铺成功', 'success')
					} else {
						uni.$showMsg(res.message)
					}
				}
			},
			async handleClick(item) {
				if (item.commodityIdNames) {
					uni.navigateTo({
						url: `/subPackages/cateList/cateList?code=${item.commodityIdNames[0].productCode}&title=${item.title}`
					})
				} else {
					// uni.$showMsg('功能正在开发中, 敬请期待')
					if(item.title == '老年大学') {
						uni.navigateTo({
							url: '/subPackages/elderlyUniversity/elderlyUniversity'
						})
					} else if(item.title == '社区文化') {
						uni.navigateTo({
							url: '/subPackages/communityCulture/communityCulture'
						})
					} else if(item.title == '法律天地') {
						uni.navigateTo({
							url: '/subPackages/legalWorld/legalWorld'
						})
					} else if(item.title == '快乐游玩') {
						uni.navigateTo({
							url: '/subPackages/happyPlay/happyPlay'
						})
					} else if(item.title == '冥想空间') {
						uni.navigateTo({
							url: '/subPackages/meditationSpace/meditationSpace'
						})
					} else if(item.title == '殡仪祭祀') {
						uni.navigateTo({
							url: '/subPackages/funeralSacrifice/funeralSacrifice'
						})
					} else if(item.title == '社区商城') {
						uni.switchTab({
							url: '/pages/sort/sort'
						})
					}
					
					
					
				}
				const res = await recordClickHomePageModuleApi('dsyl', item.title)
				console.log('点击首页模块埋点', res)
			},
			handleTuangou() {
				uni.navigateTo({
					url: `/subPackages/campaign/campaign`
				})
			},
			async toGoodsDetail(uniqueId, activityCode, boolean) {
				if (!boolean) return uni.$showMsg('已售罄,去看看其他商品吧')
				uni.setStorageSync('activityCode', activityCode)
				uni.navigateTo({
					url: `/subPackages/goodsDetail/goodsDetail?uniqueId=${uniqueId}`
				})
			},
			tomarketingCampaign() {
				uni.navigateTo({
					url: '/subPackages/campaign/campaign'
				})
			},
			toDetail(item) {
				if (item.linkUrl) {
					uni.navigateTo({
						url: `/subPackages/pcPage/pcPage?${item.linkUrl.split("?")[1]}`
					})
				}
			},
			toProductDetail(item){
				console.log('list',this.list)
				console.log('item',item)
				uni.navigateTo({
					url: `/subPackages/detailByType/detailByWorker?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			toOrder(item){
				uni.navigateTo({
					url: `/subPackages/workOrder/confirmWorkOrder?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		},
		async onReachBottom() {
			if (this.list.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			await this.getCommonGoodsList()

		},
		onShow() {
			if(!uni.getStorageSync('ylToken')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		async onLoad(option) {
			console.log(option)
			//右上角胶囊高度
			this.capsule = wx.getMenuButtonBoundingClientRect()
			option.spreadCode && uni.setStorageSync('spreadCode', option.spreadCode)
			// app.loginCallback = flag => { // 监听自定义回调函数执行
			// 	if (flag) {
			// 		api.post('/xxxxxxxxxxxxx').then((res) => { // post api
			// 			// do something
			// 		});
			// 	}
			// }
			if (!this.ylProjectCode) {
				await this.getProjectCode()
			}
			await this.getShopList()
			this.getGoodsClass()
			this.getBanner()
			const sysInfo = uni.getSystemInfoSync()
			// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
			this.wh = sysInfo.windowHeight - 50
			this.getCommonGoodsList()
			
			const res = await recordHomePageApi('dsyl')
			console.log('访问首页埋点',res)
		},
		async onPullDownRefresh() {
			this.refresh()
			if(!uni.getStorageSync('ylToken')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		onShareAppMessage() {
			//0:正式版,1:开发版,2:体验版
			return {
				title: "云市尚品",
				imageUrl: '../../static/header.jpg',
				path: `/pages/home/home?spreadCode=${this.ylUserInfo.username}`,
			}
		},
		onShareTimeline() {
			return {
				title: "云市尚品",
				imageUrl: '../../static/header.jpg'
			}
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		.card-bot-right{
			height: 70rpx;
		}
		.top {
			width: 100%;
			height: 316rpx;
			background: #0091D7;

			.nav-title {
				display: flex;
				justify-content: center;

				.enterprise-box {
					padding: 0 32rpx;
					flex: 1;
					color: #fff;
					display: flex;
					align-items: center;
				}


			}

			.logo {
				flex: 1;
				width: 450rpx;
				height: 80rpx;
				margin: 32rpx 0 40rpx 32rpx;
				image {
					width: 120%;
					height: 120%;
				}

				.hemei {
					color: #FFFFFF;
					font-weight: 500;
					font-size: 44rpx;
				}
			}

			.content {
				padding: 0 32rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0 0;
				padding: 32rpx;
				margin-top: -10rpx;
				.swiper {
					/deep/ .u-swiper-wrap {
						margin-bottom: 32rpx;

					}

					image {
						border-radius: 24rpx;
					}
				}

				.scroll-view_H {
					width: 100%;
					display: flex;
					/* 超出部分隐藏 */
					overflow: hidden;
					justify-content: center;
					/* 文本不换行 */
					white-space: nowrap;
					background-color: #fff;
					padding: 16rpx 0;
					border-radius: 16rpx;
					margin-bottom: 32rpx;

					/* IE 10+ */
				}

				.nav-bar {
					display: flex;
					justify-content: start;
					font-size: 30rpx;
					font-weight: 400;
					color: #999999;
					margin-bottom: 32rpx;
					align-items: baseline;
					margin-top: 16rpx;


					.active {
						font-size: 42rpx;
						color: #002435;
						font-family: ysbthzt;
						color: black;
						align-items: baseline;
						// position: absolute;
						// margin-top: -60rpx;

					}
				}

				.goods-box {
					.empty_box {
						image {
							width: 328rpx;
							height: 308rpx;
						}

						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-bottom: 32rpx;
					}
				}
			}
		}

		.mask {
			width: 100%;
			background-color: #fff;
			z-index: 99;

			.maskItem {
				padding: 20rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #ccc;
			}
		}
	}

	.scroll-item {
		/deep/ .u-col {
			// margin-left: 11rpx !important;
			// margin-right: 23rpx !important;
			margin-bottom: 32rpx !important;
			margin-top: 5rpx !important;
		}

	}

	.shouye-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.shouye-item {
		margin: 10rpx 5rpx;
	}

	.search {
		margin: 0 32rpx 30rpx 32rpx;
		/deep/ .u-content{
			border-radius: 20rpx !important;
		}
	}

	.title_bg {
		width: 36rpx;
		height: 10rpx;
		background: #0091D7;
		// margin-left: 80rpx;
		// margin-top: 23rpx;
		position: absolute;
		margin-left: 58rpx;
	}

	.goods-item-right {
		
	}
	.server-box{
		
	}
	.server-item{
		display: flex;
	}
	.server-item-img{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.server-item-right{
		display: flex;
		flex-direction: column;
		width: 462rpx;
		padding: 0 16rpx;
	}
	.server-item-right-name{
		font-size: 30rpx;
	}
	.server-item-right-center{
		display: -webkit-box;
		color: #999;
		font-size: 26rpx;
	}
	.split{
		width: 1rpx;
		height: 20rpx;
		background-color: #CCCCCC;
		margin: 10rpx;
	}
	.server-item-right-desc{
		color: #999;
		font-size: 26rpx;
		
	}
	.one-line{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.server-item-right-bottom{
		display: flex;
		justify-content: space-between;
	}
	.server-price-box{
		display: flex;
	}
	.price-unit{
		color: #FA3434;
		font-size: 26rpx;
		font-weight: 600;
	}
	.server-price{
		color: #FA3434;
		font-size: 34rpx;
		font-weight: 600;
	}
	.btn-mini{
		
	}
</style>